<template>
	<view :class="tabList.length > 3? 'tabs' : 'tabs three'">
		<view v-for="tab in tabList" :key="tab.value" :class="['tab', activeTab === tab.value ? 'active' : '']"
			@click="$emit('change-tab', tab.value)">
			{{ tab.label }}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			activeTab: {
				type: String,
				default: 'treatment'
			},
			tabList: {
				type: Array,
				default: () => [{
						label: '就诊',
						value: 'treatment'
					},
					{
						label: '取药',
						value: 'medicine'
					},
					{
						label: '检查',
						value: 'examine'
					},
					{
						label: '检验',
						value: 'inspection'
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}

	.tabs.three {
		justify-content: space-around;
	}

	.tab {
		font-size: 32rpx;
		color: #aaa;
		padding-bottom: 8rpx;
		position: relative;

		&.active {
			color: #222;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 8rpx;
				background: #1ec6e6;
			}
		}
	}
</style>